//index.js
//数据格式
const constants = require('../../utils/constants.js');

const RIGHT_BAR_HEIGHT = 20; // 右侧每一类的 bar 的高度（固定）
const RIGHT_ITEM_HEIGHT = 60; // 右侧每个子类的高度（固定）
const LEFT_ITEM_HEIGHT = 50 // 左侧每个类的高度（固定）

Page({
  data: {
    constants: [], // 数据
    toView: null, // 左 => 右联动 右scroll-into-view 所需的id
    currentLeftSelect: null, // 当前左侧选择的 默认的选择
    eachRightItemToTop: [], // 右侧每类数据到顶部的距离（用来与 右 => 左 联动时监听右侧滚动到顶部的距离比较）
    leftToTop: 0
  },
  onLoad: function(options) {
    this.setData({
      constants: constants,
      currentLeftSelect: constants[0].id,
      eachRightItemToTop: this.getEachRightItemToTop() //它就是一个json对象
    })
  },
  //这里只是个方法在onLoad里面调用
  getEachRightItemToTop: function() { // 获取每个右侧的 bar 到顶部的距离，用来做后面的计算。
    var obj = {};
    var totop = 0;
    obj[constants[0].id] = totop // 右侧第一类肯定是到顶部的距离为 0
    for (let i = 1; i < (constants.length + 1); i++) { // 循环来计算每个子类到顶部的高度
      totop += (RIGHT_BAR_HEIGHT + constants[i - 1].category.length * RIGHT_ITEM_HEIGHT) //bar高度+item高度
      obj[constants[i] ? constants[i].id : 'last'] = totop // 这个的目的是 例如有两类，最后需要 0-1 1-2 2-3 的数据，所以需要一个不存在的 'last' 项，此项即为第一类加上第二类的高度。
    }
    //xin理解 求出左侧对应右侧距头部的距离，第一个为0，第二个距头部的距离就是第一个右侧的高度
    console.log(obj)
    return obj
  },

  rightScroll: function(e) { // 监听右侧的滚动事件与 eachRightItemToTop 的循环作对比 从而判断当前可视区域为第几类，从而渲染左侧的对应类
    console.log(e)
    for (let i = 0; i < this.data.constants.length; i++) {
      let left = this.data.eachRightItemToTop[this.data.constants[i].id] //它只是个json对象可能比数组效率要高 前面高度
      let right = this.data.eachRightItemToTop[this.data.constants[i + 1] ? this.data.constants[i + 1].id : 'last'] //后面高度
      // 当滚动高度大于等于前面，小于后面的高度时，取当前i的id,通过前后比较，可以防止极小的
      if (e.detail.scrollTop < right && e.detail.scrollTop >= left) { 
        this.setData({
          currentLeftSelect: this.data.constants[i].id,
          leftToTop: LEFT_ITEM_HEIGHT * i //左侧高度 通过scrollTop确定左侧滚动的高度
        })
      }
    }
  },
  // 左边点击
  jumpTo: function(e) { // 左侧类的点击事件，点击时，右侧会滚动到对应分类
    this.setData({
      toView: e.target.id || e.target.dataset.id, //滚动到右侧的id
      currentLeftSelect: e.target.id || e.target.dataset.id //控制左侧的颜色
    })
  }
})